<!-- 个人中心 -->
<template>
	<view class="wrap-box df-y">
		<!-- 导航栏 -->
		<view class="navbar w100" v-if="isLogin" :style="{ background: bgcolor }">
			<cu-custom :isBack="true" :showBackIcon="false">
				<block slot="backText">
					<text class="nav-title white shopro-selector-rect">个人中心</text>
				</block>
			</cu-custom>
		</view>
		<view class="scroll_wrap" v-if="isLogin">
			<scroll-view scroll-y="true">
				<view class="content-box bs df-yc">
					<view class="head_box bs df-y white w100">
						<view class="top df ai">
							<view class="left df">
								<view class="head-img" @tap="jump('/pages/user/userinfo/userinfo')">
									<image :src="userInfo.avatar" mode="widthFix"></image>
								</view>
								<view class="right py4 df-y">
									<view class="nickname one-t shsc" @tap="jump('/pages/user/userinfo/userinfo')">
										{{userInfo.nickname}}
									</view>
									<view @click="jump('/pages/user/check-name/check-name')" class="medal">
										<medal :medalData="userInfo.group"></medal>
									</view>
								</view>
							</view>
							<view @click="jump('',{posterType:userInfo.promote},userInfo.promote)"
								class="code fs24 df-c">
								<image class="mr10" style="width: 23rpx;"
									src="/static/imgs/images/personal-center/ewm.png" mode="widthFix"></image>
								{{userInfo.promote=='alpha'?'获取我的内测邀请码':'获取我的专属海报'}}
							</view>
						</view>
						<view class="bottom white df-c">
							<view @click="jump('pages/user/wallet/score-balance')" class="item df-yc">
								<view class="num shsc fb">{{userInfo.score}}</view>
								<view style="color: rgba(255,255,255,0.6);" class="title fs22">茶多酚</view>
							</view>
							<view @click="jump('pages/goods/coupon/list')" class="item df-yc">
								<view class="num shsc fb">{{userInfo.coupons_num}}</view>
								<view style="color: rgba(255,255,255,0.6);" class="title fs22">礼券中心</view>
							</view>
						</view>
					</view>
					<view class="order-item mt30">
						<view class="list bs wh100 ai fs24 df">
							<view style="position: relative;" class="item df-yc"
								@click="jump(item.path,{type:item.type})"
								v-for="(item,index) in template.user[1].content" :key="item.name">
								<view class="img mb15">
									<image style="width: 50rpx;" :src="item.icon" mode="widthFix"></image>
								</view>
								{{item.name}}
								<view class="cu-tag badge" v-if="orderNum&&orderNum[item.type]">
									{{ orderNum[item.type] }}
								</view>
							</view>
						</view>
					</view>
					<view class="activities bs w100 df mt30">
						<view @click="jump('','',item.type)" class="list df ai" v-for="(item,index) in activityList"
							:key="index">
							<view class="icon mr30 ml24">
								<image style="width: 83rpx;" :src="item.icon" mode="widthFix"></image>
							</view>
							<view class="text df-y">
								<text class="fs26 fb mb10">{{item.title}}</text>
								<text style="color: rgba(51,51,51,0.7);" class="fs22">{{item.little}}</text>
							</view>
						</view>
					</view>
					<view class="node-game bs df ai mt30" @tap="jump('/pages/index/nodegame')">
						<view class="left">
							<view style="color:#624121 ;" class="title fs36 fb shsc">加入成事节点赛</view>
							<view style="color:#624121 ;" class="little mt20 fs24">一起瓜分百万大奖</view>
						</view>
						<view style="color: #FFE3C9;" class="right df-c fs28 shsc">立即加入</view>
					</view>
					<view class="function-list df-y bs mt30">
						<view @click="jump('',{type:item.type},item.type)" class="item"
							v-for="(item,index) in template.user[2].content" :key="item.name">
							<fun-list :item='item'></fun-list>
						</view>
					</view>
					<view style="margin-top: 60rpx;" class="slogan">
						<shopro-slogan color="#999999"></shopro-slogan>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	import medal from './components/medal.vue'
	import funList from './components/fun-list.vue'
	export default {
		components: {
			medal,
			funList
		},
		data() {
			return {
				bgcolor: '#622129',
				activityList: [{
						icon: '../../static/imgs/images/personal-center/rwzx.png',
						title: '任务中心',
						little: '做任务领茶多酚',
						type: "task"
					},
					{
						icon: '../../static/imgs/images/personal-center/jcwdjw.png',
						title: '集茶碗得金碗',
						little: '黄金茶碗免费送',
						type: "collect"
					}
				]
			};
		},
		computed: {
			...mapState({
				orderNum: state => state.user.orderNum
			}),
			userInfo() {
				return this.$store.state.user.userInfo
			},
			template() {
				return uni.getStorageSync('templateData')
			},
			isLogin() {
				return Boolean(uni.getStorageSync('token'))
			},
			role() {
				return uni.getStorageSync('userInfo').promote
			}
		},
		// 下拉刷新
		onPullDownRefresh() {

		},
		created() {

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			...mapActions(['getUserInfo']),
			// 路由跳转
			jump(path, params, type) {
				if (path && !type) {
					this.$Router.push({
						path: path,
						params: params
					});
				} else if (type) {
					switch (type) {
						case 'task':
							this.$Router.push({
								path: "/pages/public/task-center/task-center",
								params: params
							});
							break;
						case 'collect':
							this.$Router.push({
								path: "/pages/goods/collect/collect",
								params: params
							});
							break;
						case 'friend':
							this.$Router.push({
								path: "/pages/user/user-friend/user-friend",
								params: params
							});
							break;
						case 'history':
							this.$Router.push({
								path: "/pages/goods/open_history/open_history",
								params: params
							});
							break;
						case 'personal':
							this.$Router.push({
								path: "/pages/user/userinfo/userinfo",
								query: params
							});
							break;
						case 'address':
							this.$Router.push({
								path: "/pages/user/address/list",
								params: params
							});
							break;
						case 'history':
							this.$Router.push({
								path: "/pages/goods/open_history/open_history",
								params: params
							});
							break;
						case 'seal':
						case 'display':
							this.$Router.push({
								path: "/pages/public/poster/index",
								params: {
									posterType:'seal'
								}
							});
							break;
						case 'alpha':
							this.$Router.push({
								path: "/pages/user/beta-code/beta-code",
								params: params
							});
							break;
					}
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap-box {
		height: 100vh;

		.scroll_wrap {
			flex: 1;
			overflow: hidden;
		}

		.content-box {
			padding-bottom: 140rpx;

			.head_box {
				padding: 100rpx 0 46rpx 0;
				height: 430rpx;
				background-color: #622129;
				justify-content: space-between;

				.top {
					justify-content: space-between;

					.head-img {
						width: 130rpx;
						height: 130rpx;
						border: 3rpx solid #FFFFFF;
						border-radius: 50%;
						margin-left: 30rpx;
						overflow: hidden;
					}

					.right {
						align-items: flex-start;
						margin-left: 30rpx;
						justify-content: space-between;

						.nickname {
							width: 250rpx;
							font-size: 38rpx;
						}

					}

					.code {
						width: 317rpx;
						height: 69rpx;
						background: rgba($color: #FFFFFF, $alpha: 0.03);
						border-radius: 35rpx 0rpx 0px 35rpx;
					}
				}

				.bottom {
					flex: 1;
					margin-top: 80rpx;
					align-items: flex-end;

					.item {
						position: relative;
						flex: 1;

						.num {
							font-size: 40rpx;
						}
					}

					.item:first-child::after {
						display: block;
						content: "";
						position: absolute;
						width: 1rpx;
						height: 73rpx;
						background: #FFFFFF;
						opacity: 0.1;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}

			.order-item {
				width: 690rpx;
				height: 180rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.list {
					padding: 0 30rpx;
					justify-content: space-between;

					.img {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.activities {
				justify-content: space-between;
				padding: 0 30rpx;

				.list {
					width: 335rpx;
					height: 161rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
				}

			}

			.node-game {
				padding: 0 30rpx;
				justify-content: space-between;
				width: 690rpx;
				height: 173rpx;
				background: linear-gradient(270deg, #FFDDBE, #FFE9D5);
				border-radius: 20rpx;

				.right {
					width: 193rpx;
					height: 70rpx;
					background: #622129;
					border-radius: 35rpx;
				}
			}

			.function-list {
				width: 690rpx;
				height: 451rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 10rpx 30rpx;
				justify-content: space-around;
			}
		}

	}
</style>
